<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const appInfo = ref({
  logo: '/images/logo.png',
  name: 'Chat GPT',
  slogan: 'AI改变世界',
  version: '1.0.0'
})

const goBack = () => {
  router.back()
}
</script>

<template>
  <div class="about-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="router.push('/settings')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </div>
      <div class="title">关于我们</div>
      <div class="placeholder"></div>
    </div>

    <!-- App信息 -->
    <div class="app-info">
      <div class="logo">
        <img src="/images/logo.png" alt="Chat GPT">
      </div>
      <h1 class="app-name">{{ appInfo.name }}</h1>
      <div class="slogan">Slogan: {{ appInfo.slogan }}</div>
    </div>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <div class="menu-item" @click="router.push('/company')">
        <span>企业介绍</span>
        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="#999" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </div>
      <div class="menu-item" @click="router.push('/agreement')">
        <span>用户协议</span>
        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="#999" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </div>
      <div class="menu-item" @click="router.push('/privacy')">
        <span>隐私政策</span>
        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="#999" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-page {
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #f5f5f5 300px),
              linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: white;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  color: white;
}

.logo {
  width: 80px;
  height: 80px;
  background: #007AFF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.logo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.app-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}

.slogan {
  font-size: 14px;
  opacity: 0.8;
}

.menu-list {
  margin-top: 20px;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 8px 0;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  color: #333;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #f9f9f9;
}

.arrow-icon {
  width: 20px;
  height: 20px;
}
</style> 